
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>选择商品</title>
    <script type="text/javascript" src="<{$config.weburl}>/templates/wap/js/jquery-min.js"></script>
    <script type="text/javascript" src="<{$config.weburl}>/templates/wap/js/public_js_function.js"></script>
    <link type="text/css" href="<{$config.weburl}>/templates/wap/new_css/indexamazeui.css" rel="stylesheet" />
    <link type="text/css" href="<{$config.weburl}>/templates/wap/new_css/m_base.css" rel="stylesheet" />
    <link type="text/css" href="<{$config.weburl}>/templates/wap/new_css/order.css" rel="stylesheet" />
</head>
<body>
<style>
    .header_top {
        height: 50px;
        padding: 10px;
        position: relative;
        border-bottom: 1px solid #f37b1d;
        box-shadow: 0 -1px 1px #eee;
        background: #F85709;
    }
    .st_back {
        position: absolute;
        left: 10px;
        width: 30px;
        height: 30px;
    }
    .st_back a {
        float: left;
        width: 30px;
        height: 24px;
        margin-top: 3px;
        background: url(<{$config.weburl}>/templates/wap/images/st_user_ico.png) no-repeat 0 0;
        background-size: 355px auto;

    }
    .header_top .tit {
        padding: 0;
        margin: 0;
        color: #fff;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 1.6rem;
        font-weight: 500;
    }
</style>

<div class="home_top clearfix header_top">
    <div class="st_back"><a href="javascript:;" onclick="javascript:history.go(-1);"></a></div>
    <h1 class="tit">选择商品</h1>

</div>
<div id="seat" style="display: none;"></div>
 <form method="post" action="<{$config.weburl}>/?m=product&s=shop_wap_order" onsubmit=" return check_data(); "  id="bookfrm" >
    <div class="m-main">
        <div class="buy-details-hd">
            <h2 id="show_name"><{$de.pname}></h2>
            <div class="address">
                <dd><span><{$de.performance_start_time|date_format:"%Y-%m-%d"}> <{$de.spot|get_spot_name}></span></dd>
            </div>
        </div>

        <div class="big_box property">
            <div class="payment buy-fare buy-fare-li">
                <h4>演出时间：</h4>
                <ul class="clearfix" id="g1">
                    <{foreach item=vo from=$pers_date key=key}>
                    <li class="itm" data-title='<{$vo}>' data-item-id="<{$key}>">
                        <a href="javascript:;"><span><{$vo}></span></a>
                    </li>
                    <{/foreach}>
                </ul>
            </div>
        </div>

        <div class="big_box property">
            <div class="payment buy-fare  buy-fare-li">
                <h4>选择票价：</h4>
                <ul class="clearfix" id="g2">
                    <{foreach item=vo from=$price}>
                    <li <{if $vo.stock > 0 }> class="itm"  <{/if}> data-title="<{if !empty($vo.price_desc)}><{$vo.price_desc}> <{else}> <{$vo.price}> <{/if}>" data-item-id="<{$vo.price}>">
                        <a href="javascript:;" <{if $vo.stock <= 0 }> class="itm_stock" <{/if}> ><span><{if !empty($vo.price_desc)}><{$vo.price_desc}> <{else}> <{$vo.price}> <{/if}></span></a>
                    </li>
                    <{/foreach}>
                </ul>
            </div>
        </div>

        <div class="big_box">
            <div class="payment buy-fare">
                <h4>配送方式：</h4>
                <ul class="clearfix" id="time">
                    <li class="delivery_way" data-value="express"><a href="javascript:;" ><span>快递配送</span></a> <input type="radio" name="delivery_way" class="express" data-value="10" value="express" checked style=" margin-left: 33%;" /> </li>
                    <{if $de.is_door_self == 1 }>
                    <li class="delivery_way" data-value="pickup"><a href="javascript:;" ><span>上门自取</span></a> <input type="radio" name="delivery_way" class="pickup" data-value="0" value="pickup"   style=" margin-left: 33%;"/>  </li>
                    <{/if}>
                </ul>
            </div>
        </div>


        <div class="big_box">
            <div class="payment buy-fare buy-num">
                <h4>购买数量：</h4>
                <ul class="clearfix">
                    <li class="disabled" id="prev"><a href="javascript:;"><b class="icon-reduction"></b></a></li>
                    <li><a href="javascript:;" class="buy-a-input">
                        <input value="1" type="text" class="com_ipt" id="num" name="num"></a>
                    </li>
                    <li class="disabled " id="next" data-value="<{$de.stock}>"><a href="javascript:;"><b class="icon-reduction icon-plus"></b></a></li>
                </ul>
            </div>
        </div>
        <{if $de.is_real_name == 1}>
        <!--order start-->
        <div class="big_box " >
            <div class="order-dist">
                <h4 class="payment-title">
                    实名认证：
                </h4>
                <div class="order-dist-warp">
                    <div class="o_take_kuai shipping1_1"  >
                        <ul>
                            <li><label class="name">姓　　名：</label><div class="ob_input"><input type="text" name="real_user_name" id="real_user_name" class="com_ipt" placeholder="请输入姓名" value="<{$card_check.real_user_name}>" /></div></li>
                            <li><label class="name">证件类型：</label><div class="ob_input">
                                <select name="real_card_type" id="real_card_type" class="com_ipt" >
                                    <option value="1" <{if $card_check.real_card_type == 1 }> selected <{/if}> >身份证</option>
                                    <option value="2" <{if $card_check.real_card_type == 2 }> selected <{/if}> >护照</option>
                                </select>
                            </div></li>
                            <li><label class="name">证件号码：</label><div class="ob_input"><input type="text" name="real_card_no" id="real_card_no" class="com_ipt" placeholder="请输入证件号码" value="<{$card_check.real_card_no}>" /></div></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <!--order end-->
        <{/if}>
        <!--order start-->
        <div class="big_box big_boxn" id="is_exp"  >
            <div class="order-dist">
                <h4 class="payment-title">
                    收货地址：
                </h4>
                <div class="order-dist-warp">
                    <div class="o_take_kuai shipping1_1"  >
                        <ul>
                            <li><label class="name">姓　　名：</label><div class="ob_input"><input type="text" name="ship_name" id="ship_name" class="com_ipt" placeholder="请输入姓名" value="<{$consignee.name}>" /></div></li>
                            <li><label class="name">手机号码：</label><div class="ob_input"><input type="text" name="ship_mobile" id="ship_mobile" class="com_ipt" placeholder="请输入手机号" value="<{$consignee.mobile}>" /></div></li>
                            <li><label class="name">省：</label><div class="ob_input">
                                <select name="provinceid" id="provinceid" class="com_ipt" >
                                    <option value="">请选择</option>
                                    <{foreach item=vo from=$prov}>
                                    <option value="<{$vo.id}>" <{if $vo.id == $consignee.provinceid}> selected <{/if}> ><{$vo.name}></option>
                                    <{/foreach}>
                                </select>
                            </div></li>
                            <li><label class="name">市：</label><div class="ob_input">
                                <select name="cityid" id="cityid" class="com_ipt" >
                                    <option value="">请选择</option>
                                    <{if  !empty($consignee.cityid)}>
                                    <option value="<{$consignee.cityid}>" selected><{$consignee.cityid|get_city_name}></option>
                                    <{/if}>
                                </select>
                            </div></li>
                            <li><label class="name">区：</label><div class="ob_input">
                                <select name="areaid" id="areaid" class="com_ipt" >
                                    <option value="">请选择</option>
                                    <{if  !empty($consignee.areaid)}>
                                    <option value="<{$consignee.areaid}>" selected><{$consignee.areaid|get_city_name}></option>
                                    <{/if}>
                                </select>
                            </div></li>
                            <label class="name shouhuo">收货地址：</label><div class="ob_input"><textarea name="ship_addr" id="ship_addr" placeholder="请输入详细地址"  style="width:275px;height: 60px;border:1px solid #e5e5e5;"><{$consignee.address}></textarea></div>
                        </ul>
                        <div class="order-tips">
                            <div class="order-tips-box">请详细填写以上信息</div>
                            <div class="order-tips-box"><input type="checkbox" name="send_invoce" /> 我要开票 </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        <!--order end-->

          <div class="big_box big_boxn" id="is_door" style=" display:none;">
            <div class="order-dist">
                <h4 class="payment-title">
                    取票地址：
                </h4>
                 <div class="order-tips">
                            <div class="order-tips-box">温馨提示：请持订票人身份证原件上门自取，代领需出示订票人以及代领人身份证原件</div>
                        </div>
                <div class="order-dist-warp">
                    <div class="o_take_kuai shipping1_1"  >
                        <ul>
                            <li><label class="name">姓　　名：</label><div class="ob_input"><input type="text" name="pick_name" id="pick_name" class="com_ipt" placeholder="请输入姓名" value="" /></div></li>
                            <li><label class="name">手机号码：</label><div class="ob_input"><input type="text" name="pick_mobile" id="pick_mobile" class="com_ipt" placeholder="请输入手机号" value="" /></div></li>
                            <li><label class="name">取票城市：</label><div class="ob_input">
                                <select name="pick_provinceid" id="pick_provinceid" class="com_ipt" >
                                    <option value="">请选择</option>
                                    <{foreach item=vo from=$invoce_address}>
                                    <option value="<{$vo.id}>"  ><{$vo.city_name}></option>
                                    <{/foreach}>
                                </select>
                            </div></li>
                        
                            <label class="name shouhuo">取票地址：</label><div class="ob_input"><textarea name="pick_addr" id="pick_addr" placeholder="请输入详细地址"  style="width:318px;height: 60px;border:1px solid #e5e5e5;"> </textarea></div>
                        </ul>
                        <div class="order-tips">
                            <div class="order-tips-box"><input type="checkbox" name="send_invoce" /> 我要开票 </div>
                        </div>
                       
                    </div>
                </div>


            </div>
        </div>

        <div class="big_box big_boxn" id="send_ticket" style="display: none;">
            <div class="order-dist">
                <h4 class="payment-title">
                    发票信息：
                </h4>
                <div class="order-tips">
                    <div class="order-tips-box">温馨提示：如需报销发票，将在演出/活动结束后统一由演出主办方按照订单票面实际金额开具。以快递到付的形式送达。中国大陆以外地区演出/活动无法提供发票。</div>
                </div>
                <div class="order-dist-warp">
                    <div class="o_take_kuai shipping1_1"  >
                        <ul>


                            <li><label class="name">选择类型：</label><div class="ob_input">
                                <select name="invoice_type" id="invoice_type" class="com_ipt" >
                                    <option value="">请选择</option>
                                    <option value="1">个人</option>
                                    <option value="2">企业</option>
                                </select>
                            </div></li>
                            <div style="display: none;" id="show_invoice_detail">
                                <li>
                                    <label class="name">发票抬头：</label>
                                    <div class="ob_input">
                                        <input type="text" name="invoice_company" id="invoice_company" class="com_ipt" placeholder="请输入发票抬头" value="" />

                                    </div>
                                </li>
                                <li>
                                    <label class="name">寄票地址：</label>
                                    <div class="ob_input">
                                        <input type="text" name="invoice_addr" id="invoice_addr" class="com_ipt" placeholder="请输入寄票地址" value="" />
                                    </div>

                                </li>
                            </div>

                        </ul>
                    </div>
                </div>


            </div>
        </div>




    </div>
    <div class="f_o_price_info">
        <span style="line-height: 30px;"> <input type="checkbox" checked name="agreement" /> <em>我已阅读并同意 <a href="<{$config.weburl}>/help.php?id=19" style="color: #0A8CD2;">海峡票务用户服务协议</a></em> </em></span>
    </div>
    <div class="bom_fix_box">
        <span> 票品价格：<em>&yen;</em><em id="totalprice">0.00</em></span>

        <{if $de.is_seat == 1}>
        <a class="booking" href="javascript:;" id="online"  data-seat="<{$de.spot_detail.pid}>" product-id="<{$de.id}>"> 选座购票</a>
        <{else}>
        <a class="booking" href="javascript:;" id="submit_order"> 提交订单</a>
        <{/if}>

        <input type="hidden" name="product_price" id="product_price" value="0" />
        <input type="hidden" name="pid" id="pid" value="<{$de.pid}>" />
        <div id="add_product" style="display: none; "></div>
    </div>
</form>
</body>
<script language="JavaScript">

    var  is_select_time = false;
    var  item_time_id = '';
    var  item_price_id = '';
    var  item_time_title = '';
    var  item_price_title = '';
    var property_value_id = '';
    var input_html = '';
    var pid = "<{$de.pid}>";
    var data_title = '';

   // $(".property #g1").find(" li:first-child").addClass("active");

    $(".property  #g1 .itm").each(function(){
        var detail_per_date = "<{$de.performance_start_time}>";
        data_title = $(this).attr('data-item-id');
        if(detail_per_date == data_title){
            $(this).addClass("active");
        }
    });

    $(".property  #g1 .itm").on('click',function(){
        $(".property #g1 .itm").each(function(){
            if($(this).hasClass("active")){
                $(this).removeClass("active");
            }
        });
        $(".property #g2 .itm").each(function(){
            if($(this).hasClass("active")){
                $(this).removeClass("active");
            }
        });
        $(this).addClass("active");

        $(".property #g1 .itm").each(function(){
            if($(this).hasClass("active")){
                item_time_id = $(this).attr('data-item-id');
                data_title = $(this).attr('data-title');
            }
        });
        $.post("<{$config.weburl}>/ajax_back_end.php",{action:'select_produt',pid:pid,item_id:item_time_id},function(ret){
            ret = eval('('+ret+')');
            if(ret.status){
                window.location.href="<{$config.weburl}>/"+"/?m=product&s=shop_product_detail&id="+ret.product_id
            } else {
                alert(ret.msg);
            }
        });

    });

    $(".property  #g2 .itm").on('click',function(){

        $(".property #g2 .itm").each(function(){
            if($(this).hasClass("active")){
                $(this).removeClass("active");
            }
        });

        $(".property #g1 .itm").each(function(){
            if($(this).hasClass("active")){
                is_select_time = true;
                item_time_id = $(this).attr('data-item-id');
                item_time_title = $(this).attr('data-title');
            }
        });

        $(this).addClass("active");

        if(is_select_time == false){
            alert("请选择演出时间");
            return false;
        }

        if($(this).hasClass("active")){
            item_price_id = $(this).attr('data-item-id');
            item_price_title = $(this).attr('data-title');
            property_value_id = item_time_id+','+item_price_id;
            input_html = '<li class="item" data-value="'+property_value_id+'"><input type="hidden" name="property" value="'+property_value_id+'" /> </li>';
        }

        var _that = $(this);
        $.post("<{$config.weburl}>/ajax_back_end.php",{action:'stock',pid:pid,item_time_id:item_time_id,item_price_id:item_price_id},function(ret){
            ret = eval('('+ret+')');
            if(ret.status == false){
                alert(ret.msg);
                _that.removeClass("active");
                $("#add_product").html('');
                get_total_price();
                return false;
            } else {

                $("#add_product").html(input_html);
                $("#product_price").val(ret.price);
                get_total_price();
            }

        });

    });

    //增加
    $("#next").on("click",function(){
        num = $("#num").val();
        next_num = parseInt(num);

        stock = $(this).attr("data-value");
        product_extis = $("#add_product .item").attr('data-value');
        if(product_extis == undefined){
            alert("请选择票价");
            return false;
        }
        $.post("<{$config.weburl}>/ajax_back_end.php",{action:"un_sku",ticket:product_extis,num:next_num,pid:"<{$de.pid}>",type:1},function(ret){
            ret = eval('('+ret+')');
            if(!ret.status){
                alert(ret.msg);
                return false;
            } else {
                $("#num").val(next_num+1);
                get_total_price();
            }
        });



    });
    //减少
    $("#prev").on("click",function(){
        num = $("#num").val();
        next_num = parseInt(num) - 1;
        product_extis = $("#add_product .item").attr('data-value');
        if(product_extis == undefined){
            alert("请选择票价");
            return false;
        }
        if(parseInt(num) != 1){
          $("#num").val(next_num);
            get_total_price();
        }
    });

    function get_total_price(){
        var price = parseFloat($("#product_price").val());
        var num = $("#num").val();
        var product_price =parseInt(num*price);
        $("#xz_price").html(product_price.toFixed(2));
        $("#totalprice").html(product_price.toFixed(2));

    }

    $("#provinceid").on('change',function(){
        var provinceid = $(this).val();
        $.post("<{$config.weburl}>/ajax.php",{action:'get_city',id:provinceid},function(ret){
            ret = eval('('+ret+')');
            $("#cityid").html(ret.content);
        });
    });
    $("#cityid").on('change',function(){
        var cityid = $(this).val();
        $.post("<{$config.weburl}>/ajax.php",{action:'get_city',id:cityid},function(ret){
            ret = eval('('+ret+')');
            $("#areaid").html(ret.content);
        });
    });

    $("#real_card_no").on('blur',function(){
        var real_card_type = $("#real_card_type").val();
        var real_card_no = $("#real_card_no").val();
        $.post("<{$config.weburl}>/ajax.php",{real_card_type:real_card_type,real_card_no:real_card_no,action:'check_card_no'},function(ret){
            ret = eval('('+ret+')');
            if(!ret.status){
                alert(ret.msg);
            }
        });
    });

    function check_data(){
        var delivery_way = $("[name='delivery_way']:checked").val();
        var ship_name = $("#ship_name").val();
        var ship_mobile = $("#ship_mobile").val();
        var provinceid = $("#provinceid").val();
        var cityid = $("#cityid").val();
        var areaid = $("#areaid").val();
        var ship_addr = $("#ship_addr").val();
        var preg_mobile = /^1\d{10}$/;
        var send_invoice = $("[name='send_invoice']:checked").val();
        if(delivery_way == 'express'){
            if(ship_name == ''){
                alert("请填写收货人信息");
                return false;
            }
            if(ship_mobile == '') {
                alert("请填写联系手机");
                return false;
            }
            if(!preg_mobile.test(ship_mobile)){
                alert("请填写正确手机号");
                return false;
            }
            if(provinceid == '') {
                alert("请选择省");
                return false;
            }
            if(cityid == '') {
                alert("请选择市");
                return false;
            }
            if(areaid == '') {
                alert("请选择区");
                return false;
            }
            if(ship_addr == '') {
                alert("请填写街道地址");
                return false;
            }
        }
        if(delivery_way == 'pickup'){
            var pick_name = $("#pick_name").val();
            var pick_mobile = $("#pick_mobile").val();
            var pick_provinceid = $("#pick_provinceid").val();
            var pick_addr = $("#pick_addr").val();
            if(pick_name == ''){
                alert("请填写取票人姓名");
                return false;
            }
            if(pick_mobile == ''){
                alert("请填写取票人联系手机");
                return false;
            }
            if(pick_provinceid == ''){
                alert("请选择取票城市");
                return false;
            }
            if(pick_addr == ''){
                alert("请填写取票地址");
                return false;
            }
        }
    <{if $de.is_real_name == 1}>
        var real_user_name = $("#real_user_name").val();
        var real_card_type = $("#real_card_type").val();
        var real_card_no = $("#real_card_no").val();
        if(real_user_name == ''){
            alert("请填写实名认证的姓名");
            return false;
        }
        if(real_card_type == ''){
            alert("请选择证件类型");
            return false;
        }
        if(real_card_no == ''){
            alert("请填写正价号码");
            return false;
        }
        if(real_card_no != ''){
            var real_card_type = $("#real_card_type").val();
            var real_card_no = $("#real_card_no").val();
            $.post("<{$config.weburl}>/ajax.php",{real_card_type:real_card_type,real_card_no:real_card_no,action:'check_card_no'},function(ret){
                ret = eval('('+ret+')');
                if(!ret.status){
                    alert(ret.msg);
                    return false;
                } else {
                    return true;
                }
            });
        }
    <{/if}>
        return true;
    }

    $("#submit_order").on("click",function(){
        product_extis = $("#add_product .item").attr('data-value');
        var invoice_type = $("#invoice_type").val();
        var invoice_company = $("#invoice_company").val();

        if(product_extis == undefined){
            alert("请选择票价");
            return false;
        }else if(!$("[name='agreement']").is(":checked")){
            alert("请同意用户服务协议");
        }else {
          if($("[name='send_invoce']").is(":checked")){

                if(invoice_type == ''){
                    alert("请选择发票类型");
                    $("#invoice_type").focus();
                    return false;
                } else if(invoice_company == ''){
                    alert("请填写发票抬头");
                    $("#invoice_company").focus();
                    return false;
                }
            }
            $("#bookfrm").submit();
        }

    });



    //选座
    $("#online").on("click",function(){
        var seat_id = $(this).attr('data-seat');
        var product_id = $(this).attr('product-id');
        var  product_extis = $("#add_product .item").attr('data-value');
        var ship_name = $("#ship_name").val();
        var ship_mobile = $("#ship_mobile").val();
        var provinceid = $("#provinceid").val();
        var cityid = $("#cityid").val();
        var areaid = $("#areaid").val();
        var ship_addr = $("#ship_addr").val();
        var delivery_way = $("[name='delivery_way']:checked").val();
        if( seat_id == '' || product_id == '' ){
            alert("数据异常");
            return false;
        }
        if( product_extis == undefined){
            alert("请选择票价");
            return false;
        }
        if(check_data()){
            
            $.post("<{$config.weburl}>/api/login.php",{seat_id:seat_id,product_id:product_id,ship_name:ship_name,ship_mobile:ship_mobile,
                provinceid:provinceid,cityid:cityid,areaid:areaid,ship_addr:ship_addr,delivery_way:delivery_way},function(ret){
                ret = eval('('+ret+')');
                if(ret.status){
                    $("#seat").html(ret.content);
                } else {
                    if( ret.url != undefined ){
                        window.location.href = ret.url;
                    } else {
                        alert(ret.msg);
                    }
                }
            });
        }

    });

    //缺货
    $(".property  #g2 .itm_stock").on('click',function(){
        var pid = "<{$de.id}>";
        window.location.href= "<{$config.weburl}>/?m=product&s=shop_stock&id=" + pid ;
    });

    //选择发票
    $("#invoice_type").on("change",function(){
        if( '' != $(this).val()) {
            $("#show_invoice_detail").show();
        } else {
            $("#show_invoice_detail").hide();
        }
    });

//上门取票
$("[name='delivery_way']").on('click',function(){
    var is_door_value = $(this).val();
    if(is_door_value == 'pickup'){
        $("#is_door").show();
        $("#is_exp").hide();
    } else {
        $("#is_exp").show();
        $("#is_door").hide();
        $("#pick_name").val('');
        $("#pick_mobile").val('');
        $("#pick_provinceid").val('');
        $("#pick_addr").val('');
    }
});

    //开票
    $("[name='send_invoce']").on('click',function(){
        if($(this).is(":checked")){
            $("#send_ticket").show();
        } else {
            $("#send_ticket").hide();
        }
    });

    //选择 配送方式
    $(".delivery_way").on("click",function(){
        var values = $(this).attr("data-value");

        if(values == 'express'){
            $("#is_exp").show();
            $("#is_door").hide();
            $(".pickup").attr("checked","checked");
            $(".express").attr("checked"," ");

        } else {
            $("#is_door").show();
            $("#is_exp").hide();
            $(".express").attr("checked","checked");
            $(".pickup").attr("checked"," ");
        }

    });

    //选票地址

    $("[name='pick_provinceid']").on("change",function(){
        var id = $(this).val();
        $.post("<{$config.weburl}>/ajax.php",{id:id,action:'pick_city_info'},function(ret){
            ret = eval('('+ret+')');
            $("[name='pick_addr']").val(ret.msg);
        });
    });





</script>

</html>
